let arrowR = document.querySelector(".arrow_right");
let arrowL = document.querySelector(".arrow_left");
let img_box = document.querySelector(".img_box");
let li = document.querySelectorAll(".img_box>ul>li"); //获取img_box里的每一个li
let cloneImg = document.querySelector(".img_box>ul").firstElementChild.cloneNode(true); //克隆第一张图片
document.querySelector(".img_box>ul").appendChild(cloneImg); //添加克隆图片到ul
let index = 0; //记录当前第几张图片（索引值）
let lock = true; //设置左右按钮节流锁，防止用户疯狂点击按钮

// 一、点击右按钮事件
arrowR.addEventListener("click", rightBtn);

// 封装右按钮函数
function rightBtn() {
    if (!lock) { //  判断锁的状态，是关闭直接结束函数
        return;
    }
    index++;
    img_box.style.transition = ".5s ease"; //因为到克隆图片时，过渡会被去掉，所以要重新加上
    if (index === 5) { //在克隆图片上的操作
        setTimeout(function() {
            img_box.style.left = 0;
            index = 0;
            img_box.style.transition = "none";
        }, 500); //500毫秒后瞬间从克隆图片切换到第一张图片
    }
    img_box.style.left = -590 * index + "px";

    // 关锁
    lock = false;

    // 500毫秒之后打开
    setTimeout(function() {
        lock = true;
    }, 500);

    setCircles(); //小圆点
}

// 二、点击左按钮事件
arrowL.addEventListener("click", leftBtn);

// 封装左按钮函数
function leftBtn() {
    if (!lock) { //  判断锁的状态，是关闭直接结束函数
        return;
    }
    if (index === 0) { //在第一张图片上的操作
        img_box.style.transition = "none"; //取消过渡
        img_box.style.left = -li.length * 590 + "px"; //瞬间从第一张图片切换到克隆图片上
        index = li.length - 1; //获取克隆图片的前一张图片索引值
        setTimeout(function() {
            img_box.style.transition = ".5s ease"; //重新加过渡
            img_box.style.left = -(li.length - 1) * 590 + "px"; //500毫秒后切换克隆图片的前一张图片
        });
    } else {
        index--;
        img_box.style.left = -590 * index + "px";
    };

    // 关锁
    lock = false;

    // 500毫秒之后打开
    setTimeout(function() {
        lock = true;
    }, 500);

    setCircles(); //小圆点
}

// 三、点击小圆点事件
let bar_box = document.querySelector(".bar_box");
let circle = document.querySelectorAll(".bar_box>span");
circle.forEach(function(item, idx) {
    item.setAttribute("data-n", idx); //给每个小圆点设置data-n属性（索引值）
});

//点击轮播 事件委托
bar_box.addEventListener("click", function(e) {
    if (e.target.nodeName.toLowerCase() === "span") {
        let n = e.target.getAttribute("data-n"); //获取指定小圆点的data-n的值
        let theCircle = document.querySelector(`li[data-n="${n}]`); //绑定指定的小圆点
        index = n; //data-n的值相当于是图片index的值
        img_box.style.left = -index * 590 + "px";
        setCircles();

    };
});

//封装小圆点函数
function setCircles() {
    circle.forEach(function(item, idx) {
        if (idx === index % 5) {
            circle[idx].classList.add("barActive");
        } else {
            circle[idx].classList.remove("barActive");
        };
    });
};

// 四、自动轮播
let timer; //设置定时器
function timeFn() {
    console.log(timer);
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(function() {
        rightBtn();
    }, 2000)
}
timeFn();

// 鼠标移入图片区域，停止轮播
img_box.addEventListener("mouseenter", function() {
    clearInterval(timer)
});

// 鼠标移出图片区域，1s后轮播
img_box.addEventListener("mouseleave", function() {
    setTimeout(timeFn, 1000)
});

// 检测页面是否切换，切换就停止轮播
window.addEventListener("visibilitychange", function() {
    console.log("qieping");
    if (document.hidden) {
        clearInterval(timer);
    } else {
        timeFn();
    };
});